<template>
  <div class="app-container">
   <nx-github-corner></nx-github-corner>
     <!-- <a target="_blank" href="https://github.com/mgbq/vue-permission"><img
        style="position: absolute; top: 48px; right: 0; border: 0;"
        src="../../../static/img/report/forkme.png"
        alt="Fork me on GitHub"></a> -->
    <!-- <div class="item">
      <h4>数据展示</h4>
      <nx-data-display :option="option"></nx-data-display>
    </div>
    <div class="item">
      <h4>简易展示</h4>
      <nx-data-icons :option="easyDataOption2"></nx-data-icons>
    </div>
    <div class="item">
      <h4>带数字的展示</h4>
      <nx-data-icons :option="easyDataOption1"></nx-data-icons>
    </div> -->
    <div class="item center-text color-text">
      <h1>欢迎进入研究生奖学金系统</h1>
    </div>
    <div class="item">
      <h4>
      <el-tag>
        优秀学生代表
      </el-tag>
      </h4>
      <nx-data-card :option="easyDataOption0"></nx-data-card>
    </div>

    <div class="item" >
      
      <el-tag>
        日历
      </el-tag>
     
      <el-calendar v-model="value">
      </el-calendar>
      <nx-data-tabs :option="easyDataOption"></nx-data-tabs>
    </div>
    
  </div>
</template>

<script>

import nxDataDisplay from '@/components/nx-data-display/nx-data-display'
import nxDataCard from '@/components/nx-data-card/nx-data-card'
import nxDataTabs from '@/components/nx-data-tabs/nx-data-tabs'
import nxDataIcons from '@/components/nx-data-icons/nx-data-icons'
import nxGithubCorner from '@/components/nx-github-corner'

export default {
  name: 'report',
  components: {
    nxDataDisplay,
    nxDataCard,
    nxDataTabs,
    nxDataIcons,
    nxGithubCorner

  },
  data() {
    return {
      value: new Date(),
      // option: {
      //   span: 8,
      //   color: '#15A0FF',
      //   data: [
      //     {
      //       count: 1000,
      //       title: '日活跃数'
      //     },
      //     {
      //       count: 3000,
      //       title: '月活跃数'
      //     },
      //     {
      //       count: 20000,
      //       title: '年活跃数'
      //     }
      //   ]
      // },
      
      easyDataOption0: {
        span: 6,
        borderColor: '#fff',
        // borderColor: 'transparent', // 将边框颜色设置为透明
        data: [
          {
            name: '麻炳昌',
            src: 'static/img/mock/card/证件照.jpg',
            text: '除了帅就还是帅'
          },
          {
            name: '峰峰',
            src: 'static/img/mock/card/card-2.jpg',
            text: '帅就一个字我只说一次'
          },
          {
            name: '憨憨',
            src: 'static/img/mock/card/card-3.jpg',
            text: '又帅又能打'
          },
          {
            name: '俊凯',
            src: 'static/img/mock/card/card-4.jpg',
            text: '国奖选手'
          }
        ]
      },
      // easyDataOption: {
      //   span: 6,
      //   data: [
      //     {
      //       title: '分类统计',
      //       subtitle: '实时',
      //       count: 7993,
      //       allcount: 10222,
      //       text: '当前分类总记录数',
      //       color: 'rgb(49, 180, 141)',
      //       key: '类'
      //     },
      //     {
      //       title: '附件统计',
      //       subtitle: '实时',
      //       count: 3112,
      //       allcount: 10222,
      //       text: '当前上传的附件数',
      //       color: 'rgb(56, 161, 242)',
      //       key: '附'
      //     },
      //     {
      //       title: '文章统计',
      //       subtitle: '实时',
      //       count: 908,
      //       allcount: 10222,
      //       text: '评论次数',
      //       color: 'rgb(117, 56, 199)',
      //       key: '评'
      //     },
      //     {
      //       title: '新闻统计',
      //       subtitle: '实时',
      //       count: 908,
      //       allcount: 10222,
      //       text: '评论次数',
      //       color: 'rgb(59, 103, 164)',
      //       key: '新'
      //     }
      //   ]
      // },
      // easyDataOption1: {
      //   color: 'rgb(63, 161, 255)',
      //   span: 4,
      //   data: [
      //     {
      //       title: '今日注册',
      //       count: 12678,
      //       icon: 'icon-cuowu'
      //     },
      //     {
      //       title: '今日登录',
      //       count: 22139,
      //       icon: 'icon-shujuzhanshi2'
      //     },
      //     {
      //       title: '今日订阅',
      //       count: 35623,
      //       icon: 'icon-jiaoseguanli'
      //     },
      //     {
      //       title: '今日评论',
      //       count: 16826,
      //       icon: 'icon-caidanguanli'
      //     },
      //     {
      //       title: '今日评论',
      //       count: 16826,
      //       icon: 'icon-caidanguanli'
      //     },
      //     {
      //       title: '今日评论',
      //       count: 16826,
      //       icon: 'icon-caidanguanli'
      //     }
      //   ]
      // },
      // easyDataOption2: {
      //   color: 'rgb(63, 161, 255)',
      //   span: 4,
      //   discount: true,
      //   data: [
      //     {
      //       title: '错误日志',
      //       count: 12678,
      //       icon: 'icon-cuowu'
      //     },
      //     {
      //       title: '数据展示',
      //       count: 12678,
      //       icon: 'icon-shujuzhanshi2'
      //     },
      //     {
      //       title: '权限管理',
      //       count: 12678,
      //       icon: 'icon-jiaoseguanli'
      //     },
      //     {
      //       title: '菜单管理',
      //       count: 12678,
      //       icon: 'icon-caidanguanli'
      //     },
      //     {
      //       title: '权限测试',
      //       count: 12678,
      //       icon: 'icon-caidanguanli'
      //     },
      //     {
      //       title: '错误页面',
      //       count: 12678,
      //       icon: 'icon-caidanguanli'
      //     }
      //   ]
      // }
    }
  },
  created() {},
  watch: {},
  mounted() {},
  computed: {}
}
</script>

<style scoped>
.item {
  margin-bottom: 16px;
}
</style>
<style lang ="scss">
    @import '../../styles/data-card.scss';
    @import '../../styles/data-display.scss';
    @import '../../styles/data-icons.scss';
    @import '../../styles/data-tabs.scss';

    .center-text {
      text-align: center;
    }

    .color-text {
      color: rgb(58, 58, 153);
    }
 
</style>
